<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: yuan
  Date: 2020/10/23
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | 编辑游客列表</title>
    <!-- Tell the browser to be responsive to screen width -->
    <jsp:include page="../include/header.jsp"></jsp:include>
</head>
<body class="hold-transition sidebar-mini">
<%--整个页面 div--%>
<div class="wrapper">
    <!-- Navbar  头部导航栏 -->
    <jsp:include page="../include/nav.jsp"/>
    <!-- /.navbar -->

    <!-- Main Sidebar Container  侧边栏 左侧边栏 -->
    <jsp:include page="../include/left.jsp"/>
    <!-- Content Wrapper. Contains page content  中部内容区   -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>游客编辑</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">首页</a></li>
                            <li class="breadcrumb-item active">游客编辑</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h2>订单id：${order.id}</h2>

                                <button style="width: 120px ;float: right;" type="button" onclick="toAdd()" class="btn btn-block btn-success btn-1g">添加游客</button>


                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="example2" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>游客姓名</th>
                                        <th>游客性别</th>
                                        <th>游客身份证号</th>
                                        <th>游客手机号</th>
                                        <th>游客生日</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tdata">
                                    <c:forEach items="${touristList}" var="tourist">
                                        <tr>
                                            <td>${tourist.id}</td>
                                            <td>${tourist.touristName}</td>
                                            <td>${tourist.touristSex}</td>
                                            <td>${tourist.touristIdcard}</td>
                                            <td>${tourist.touristPhone}</td>
                                            <td><fmt:formatDate type="date" pattern="yyyy-MM-dd HH:mm:ss" value="${tourist.touristBirthday}"/></td>

                                            <td><a href="/tourist/toEdit?id=${tourist.id}">修改</a>||<a href="/tourist/del?id=${tourist.id}">删除</a></td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <th>id</th>
                                        <th>游客姓名</th>
                                        <th>游客性别</th>
                                        <th>游客身份证号</th>
                                        <th>游客手机号</th>
                                        <th>游客生日</th>
                                        <th>操作</th>
                                    </tr>
                                    </tfoot>
                                </table>



                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->


                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <jsp:include page="../include/footer.jsp"/>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<div style="display: none">
    <div class="col-sm-6 tourarea">
        <div class="form-group">
            <label>选择游客</label>
            <select id="youke" name="touristSex" >

            </select>

        </div>
    </div>
</div>
    <!-- jQuery -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- DataTables -->
    <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../js/adminlte.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="../../js/demo.js"></script>
<script src="../../js/layer/layer.js"></script>
    <!-- page script -->
    <script>
        $(function () {
            load();
            $('#example2').DataTable({
                "paging": false,
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": false,
                "autoWidth": false,
                "responsive": true
            });
        });

        //    连接跳转方法
        function jump(page) {
            var keywords = $("[name='keywords']").val();
            location.href = "/tourist/list?page=" + page + "&keywords=" + keywords;
        }
        //订单id
        var orderid='${order.id}';
        //添加页面
    function toAdd() {
        $.ajax({
            url:"/order/getTouristOut",
            type:"post",
            data:{orderid:orderid},
            success:function (data) {
                var html= '';
                for (var i = 0; i < data.length; i++) {
                    html +="<option value='"+data[i].id+"'>"+data[i].touristName+"</option>";

                }
                $("#youke").html(html);
                //页面层
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    content: $(".tourarea").html(),
                    btn:"提交",
                    btn2:function () {
                        var tourist_id=$("#youke").val();
                        $.ajax({
                            url:"/order/addTourist",
                            type:"post",
                            data:{orderid:orderid,tourist_id:tourist_id},
                            success:function (data) {
                               location.reload();


                            }
                        });
                    }
                });

            }
        })
    }

    function load() {
        $.ajax({
            url:"/order/getTourist",
            type:"post",
            data:{orderid:orderid},
            success:function (data) {
                var html= '';
                for (var i = 0; i < data.length; i++) {
                    html +="<tr>";
                    html +="    <td>"+data[i].id+"</td>";
                    html +="    <td>"+data[i].touristName+"</td>";
                    html +="    <td>"+data[i].touristSex+"</td>";
                    html +="    <td>"+data[i].touristIdcard+"</td>";
                    html +="    <td>"+data[i].touristPhone+"</td>";
                    html +="    <td>"+data[i].touristBirthday+"</td>";
                    html +='    <td><a href="javascript:delT(\''+data[i].id+'\');">删除</a></td>';
                    html +="</tr>";
                }
                $("#tdata").html(html);

            }
        });
    }
    function delT(tourist_id) {
        $.ajax({
            url:"/order/delTourist",
            type:"post",
            data:{orderid:orderid,tourist_id:tourist_id},
            success:function (data) {
                location.reload();


            }
        });

    }
</script>

</body>

</html>




